import { PureComponent } from 'react';
import {
    Row,
    Col,
    Form,
    Input,
    Select,
    Modal,
    Radio,
} from 'antd';
import SelectMenuTree from '@/components/SelectMenuTree';
const FormItem = Form.Item;
const { Option } = Select;



@Form.create()
class CreateForm extends PureComponent {
	
	constructor(props) {
	    super(props);
	    this.state = {
	    	visible: 1,
	    	getMenuTreeBySelectTree: "",
	    }
	}
  
  	selectedMenuTreeValue = (deptRecord) => {
  		this.setState({
  			getMenuTreeBySelectTree: deptRecord,
  		})
	}

	okHandle = () => {
		const { form,handleAdd } = this.props;
		const { getMenuTreeBySelectTree } = this.state;
	    form.validateFields((err, fieldsValue) => {
		        if (err) return;
			    form.resetFields();
			    if(getMenuTreeBySelectTree) {
					fieldsValue.levelcode = getMenuTreeBySelectTree.triggerNode.props.dataRef.levelcode;
					fieldsValue.parentid = getMenuTreeBySelectTree.triggerNode.props.dataRef.key;
					fieldsValue.parent_name = getMenuTreeBySelectTree.triggerNode.props.dataRef.title;
				}else {
					fieldsValue.levelcode = "000000000000";
					fieldsValue.parentid = "000000000000";
				}
			    handleAdd(fieldsValue);
		});
	};
	
	onChange = e => {
		if(e.target.value == 1) {
			this.setState({
				visible: 1,
			})
		}else {
			this.setState({
				visible: 2,
			})
		}
	};
	
	resetButton = () => {
		this.setState({
			visible:1,
		})
	};

  render() {
    const {form, modalVisible,handleModalVisible,requestModelName,menu } = this.props;
	const parentMenuTreeMethod = {
		menu,
		selectedMenuTreeValue: this.selectedMenuTreeValue,
		requestModelName,
	}
    const { visible } = this.state;
return (
    <Modal
width={800}
destroyOnClose
title="新增"
visible={modalVisible}
onOk={this.okHandle}
onCancel={() => handleModalVisible()}
afterClose={() => this.resetButton()}
>
<Form  layout="vertical">
	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>


        <Col  md={12} sm={24}>
	        <FormItem  label="类型选择">
	            {form.getFieldDecorator('type', {
	            	initialValue: "1",
	            })(
        	      <Radio.Group onChange={this.onChange} buttonStyle="solid">
			        <Radio.Button value="1">菜单</Radio.Button>
			        <Radio.Button value="2">按钮</Radio.Button>
			      </Radio.Group>
	            )}
	        </FormItem>
        </Col>
		

    </Row>
    {visible == 1?(
    	<div>
	    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
	
	
		        <Col  md={12} sm={24}>
			        <FormItem  label="菜单名称">
			            {form.getFieldDecorator('text', {
			            rules: [{ required: true, message: '请输入菜单名称！', min: 1 }],
			            })(<Input placeholder="请输入" />)}
			        </FormItem>
		        </Col>
	
	
	
		        <Col  md={12} sm={24}>
			        <FormItem  label="链接">
			            {form.getFieldDecorator('href', {
			            rules: [{ required: true, message: '请输入链接！', min: 1 }],
			            })(<Input placeholder="请输入" />)}
			        </FormItem>
		        </Col>
			
	
	
	    	</Row>
	    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
	
				<Col  md={12} sm={24}>
			        <FormItem  label="国际化菜单名">
			            {form.getFieldDecorator('i18n_name', {
			            rules: [{ required: true, message: '请输入国际化菜单名！', min: 1 }],
			            })(<Input placeholder="请输入" />)}
			        </FormItem>
		        </Col>
		        <Col md={12} sm={24}>
			        <FormItem label="状态">
			            {form.getFieldDecorator('enable',{
			            	initialValue: "1",
			            })(
			                <Select placeholder="请选择" style={{ width: '100%' }}>
			                    <Option value="1">可用</Option>
			                    <Option value="0">禁用</Option>
			                </Select>
			            )}
			        </FormItem>
		        </Col>
	
	    	</Row>
	    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
	
				<Col  md={12} sm={24}>
			        <FormItem  label="路由组件">
			            {form.getFieldDecorator('component', {
			            rules: [{ required: false, message: '请输入路由组件！', min: 1 }],
			            })(<Input placeholder="请输入" />)}
			        </FormItem>
		        </Col>
		        <Col  md={12} sm={24}>
			        <FormItem  label="路由重定向">
			            {form.getFieldDecorator('redirect', {
			            rules: [{ required: false, message: '请输入路由重定向！', min: 1 }],
			            })(<Input placeholder="请输入" />)}
			        </FormItem>
		        </Col>
	
	    	</Row>
	    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
	
		        <Col  md={12} sm={24}>
			        <FormItem  label="上级菜单">
			            {form.getFieldDecorator('menu')(
			               	<SelectMenuTree {...parentMenuTreeMethod} />
			            )}
			        </FormItem>
		        </Col>
	
	    	</Row>
    	</div>
    ):(
    	<div>
	    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
	
	
		        <Col  md={12} sm={24}>
			        <FormItem  label="按钮名称">
			            {form.getFieldDecorator('text', {
			            rules: [{ required: true, message: '请输入按钮名称！', min: 1 }],
			            })(<Input placeholder="请输入" />)}
			        </FormItem>
		        </Col>
	
	
	
		        <Col  md={12} sm={24}>
			        <FormItem  label="上级菜单">
			            {form.getFieldDecorator('menu')(
			               	<SelectMenuTree {...parentMenuTreeMethod} />
			            )}
			        </FormItem>
		        </Col>
			
	
	
	    	</Row>
    	</div>
    )}




</Form>
</Modal>
);
  }

}

export default CreateForm;
